import React from 'react'
import Loadable from 'react-loadable'
import Pace from "./pace"

import {Spin} from 'antd'
// 按需加载组件
export default function loading(comp, customizeLoading) {
  const loading = customizeLoading || <div className={'loading-box'}>
    <Spin tip="加载中" size={"large"}/>
  </div>
  return Loadable({
    loader: comp,
    loading: (props) => {
      Pace.start()
      if (props.error) {
        return <div className={'loading-box'}>
          <h3 color={'loading-error'}>加载错误,请刷新!</h3>
          <div>
            {JSON.stringify(props.error)}
          </div>
        </div>
      } else if (props.timedOut) {
        return <div className={'loading-box'}>
          加载超时,请刷新!
        </div>
      } else if (props.pastDelay) {
        return loading
      } else {
        return null
      }
    },
    timeout: 10000,
    delay: 300
  })
}